<template>
	<view class="login-container">
		<view class="login-header">
			<text class="app-name">企业ERP管理系统</text>
		</view>
		
		<view class="login-form">
			<view class="form-item">
				<view class="input-wrapper">
					<uni-icons type="person" size="20" color="#999"></uni-icons>
					<input 
						class="input" 
						v-model="formData.username" 
						placeholder="请输入用户名"
						placeholder-style="color: #ccc"
					/>
				</view>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input 
						class="input" 
						v-model="formData.password" 
						type="password"
						placeholder="请输入密码"
						placeholder-style="color: #ccc"
						@confirm="handleLogin"
					/>
				</view>
			</view>
			
			<view class="form-item remember">
				<checkbox-group @change="handleRememberChange">
					<label>
						<checkbox value="remember" :checked="rememberMe" color="#007AFF"/>
						<text class="remember-text">记住密码</text>
					</label>
				</checkbox-group>
			</view>
			
			<button 
				class="login-btn" 
				type="primary" 
				@click="handleLogin"
				:loading="loading"
				:disabled="loading"
			>
				{{ loading ? '登录中...' : '登录' }}
			</button>
			
			<view class="tips">
				<text class="tip-text">测试账号: admin / 123456</text>
			</view>
			
			<button 
				class="face-login-btn"
				@click="goToFaceRecognition"
			>
				<uni-icons type="person-filled" size="20" color="#667eea"></uni-icons>
				<text class="face-login-text">人脸识别登录</text>
			</button>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/auth.js'
import { setToken, setUserInfo } from '@/utils/auth.js'
import { mapMutations } from 'vuex'

export default {
	data() {
		return {
			formData: {
				username: '',
				password: ''
			},
			rememberMe: false,
			loading: false
		}
	},
	onLoad() {
		// 尝试从本地存储加载记住的用户名和密码
		const savedUsername = uni.getStorageSync('saved_username')
		const savedPassword = uni.getStorageSync('saved_password')
		if (savedUsername) {
			this.formData.username = savedUsername
			this.formData.password = savedPassword
			this.rememberMe = true
		}
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setToken']),
		
		handleRememberChange(e) {
			this.rememberMe = e.detail.value.length > 0
		},
		
		async handleLogin() {
			// 表单验证
			if (!this.formData.username) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				})
				return
			}
			
			if (!this.formData.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return
			}
			
			this.loading = true
			
			try {
				// 调用真实的登录接口
				const res = await login(this.formData)
				
				// 检查响应格式并保存token和用户信息（统一格式）
				let token, userInfo
				if (res.code === 200 && res.data) {
					// Java后端响应格式
					token = res.data.token
					userInfo = res.data.userInfo || res.data
				} else if (res.success && res.token) {
					// 统一后的Python后端响应格式
					token = res.token
					userInfo = res.userInfo
				} else {
					throw new Error(res.message || '登录失败')
				}
				
				// 同时更新本地存储和Vuex store
				setToken(token)
				setUserInfo(userInfo)
				this.setToken(token)
				this.setUserInfo(userInfo)
				
				// 记住密码
				if (this.rememberMe) {
					uni.setStorageSync('saved_username', this.formData.username)
					uni.setStorageSync('saved_password', this.formData.password)
				} else {
					uni.removeStorageSync('saved_username')
					uni.removeStorageSync('saved_password')
				}
				
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				// 延迟跳转，让用户看到成功提示
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)
				
			} catch (error) {
				console.error('登录失败:', error)
				// 错误信息已经在request.js中通过uni.showToast显示了
			} finally {
				this.loading = false
			}
		},
		
		// 跳转到人脸识别页面
		goToFaceRecognition() {
			uni.navigateTo({
				url: '/pages/face-recognition/face-recognition'
			});
		}
	}
}
</script>

<style scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.login-header {
	text-align: center;
	margin-bottom: 80rpx;
}

.logo {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 30rpx;
}

.app-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.login-form {
	width: 100%;
	max-width: 600rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 40rpx;
}

.input-wrapper {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #f5f7fa;
	border-radius: 12rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s;
}

.input-wrapper:focus-within {
	border-color: #007AFF;
	background: #ffffff;
	box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
}

.input {
	flex: 1;
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #333333;
}

.remember {
	margin-bottom: 50rpx;
}

.remember checkbox {
	transform: scale(0.8);
}

.remember-text {
	margin-left: 10rpx;
	font-size: 26rpx;
	color: #666666;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
}

.login-btn:active {
	opacity: 0.8;
}

.tips {
	margin-top: 30rpx;
	text-align: center;
}

.tip-text {
	font-size: 24rpx;
	color: #999999;
}

.face-login-btn {
	width: 100%;
	height: 88rpx;
	margin-top: 30rpx;
	background: rgba(255, 255, 255, 0.95);
	border: 2rpx solid #667eea;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.face-login-btn:active {
	opacity: 0.8;
	transform: translateY(2rpx);
}

.face-login-text {
	font-size: 28rpx;
	color: #667eea;
	font-weight: 500;
	margin-left: 12rpx;
}
</style>

